﻿<div class="col-sm-12">
    <form class="form-horizontal" role="form" ng-controller="PortCtrl">
        <div ng-controller="dateValidator">
            <div ng-controller="popupController">
                <div class="form-group" ng-class="{'has-error': hasError}">
                    <div class="col-xs-12">
                        <label ng-class="{'error help-block': hasError}">
                            Name <span ng-show="hasError">mustn't match or be empty.</span>
                        </label>
                        <span class="k-widget k-autocomplete k-header k-state-default">
                            <input type="text" kendo-auto-complete class="k-input" onclick="this.select();" k-options="autocomplete" id="{{'name'+id}}"
                                ng-model="port.name" ng-change="setName();checkName();getData()" ng-disabled="data == 0" />
                            <span class="k-icon k-loading" ng-style="currStyle"></span>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <label>Zone: {{data.Zone}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-4">
                        <select class="form-control" ng-model="port.ETAMarker"
                            ng-change="changeMarker('ETAMarker', port.ETAMarker); checkMarkerTime();
                     updateCalc(data, ports)"
                            ng-disabled="data == 0">
                            <option>ETA</option>
                            <option>NOR</option>
                            <option>NOR+6h</option>
                        </select>
                    </div>
                    <div class="col-xs-8">
                        <span class="k-widget k-datetimepicker k-header k-input">
                            <span class="k-picker-wrap k-state-default">
                                <input kendo-date-time-picker k-ng-model="data.ETA_NORTime" type="text" class="k-input" ng-model="port.ETA_NORTime" name="{{'ETA_NORTimepopup'}}" id="popup"
                                    ng-blur="data.ETA_NORTime=checkOldMatch(port.ETA_NORTime, data.ETA_NORTime);
                                    reset('ETA_NORTimepopup', data.ETA_NORTime, id);
                                    changePortDate('ETA_NORTime', data.ETA_NORTime); updateCalc(data, ports)"
                                    k-parse-formats="formatsDateTime" k-format="formatDateTime"
                                    ng-disabled="data == 0" />
                                <span unselectable="on" class="k-select">
                                    <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="data.ETA_NORTime=clearDate();port.ETA_NORTime=clearDate();
                                    reset('ETA_NORTimepopup', data.ETA_NORTime, id); changePortDate('ETA_NORTime', data.ETA_NORTime);updateCalc(data, ports)">select</span>
                                </span>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-4">
                        <select class="form-control" ng-model="port.AAMarker" tabindex="-1"
                            ng-change="changeMarker('AAMarker', port.AAMarker); data.AAMarker=port.AAMarker;
                     updateCalc(data, ports)"
                            ng-disabled="data == 0">
                            <option>Anchor aweigh</option>
                        </select>
                    </div>
                    <div class="col-xs-8">
                        <span class="k-widget k-datetimepicker k-header k-input">
                            <span class="k-picker-wrap k-state-default">
                                <input kendo-date-time-picker k-ng-model="data.AATime" type="text" class="k-input" ng-model="port.AATime" id="popup" name="{{'AATimepopup'}}"
                                    ng-blur="data.AATime=checkOldMatch(port.AATime, data.AATime); reset('AATimepopup', data.AATime, id);
                                    changePortDate('AATime', data.AATime); updateCalc(data, ports)" tabindex="-1"
                                    k-parse-formats="formatsDateTime" k-format="formatDateTime"
                                    ng-disabled="data == 0" />
                                <span unselectable="on" class="k-select">
                                    <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="data.AATime=clearDate();port.AATime=clearDate();
                                    reset('AATimepopup', data.AATime, id);changePortDate('AATime', data.AATime);updateCalc(data, ports)">select</span>
                                </span>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-4">
                        <select class="form-control" ng-model="port.ETBMarker"
                            ng-change="changeMarker('ETBMarker', port.ETBMarker); data.ETBMarker=port.ETBMarker;
                    updateCalc(data, ports)"
                            ng-disabled="data == 0">
                            <option>ETB</option>
                            <option>ATB</option>
                        </select>
                    </div>
                    <div class="col-xs-8">
                        <span class="k-widget k-datetimepicker k-header k-input">
                            <span class="k-picker-wrap k-state-default">
                                <input kendo-date-time-picker k-ng-model="data.ETB_ATBTime" type="text" class="k-input" ng-model="port.ETB_ATBTime" id="popup" name="{{'ETB_ATBTimepopup'}}"
                                    ng-blur="data.ETB_ATBTime=checkOldMatch(port.ETB_ATBTime,data.ETB_ATBTime); 
                                       reset('ETB_ATBTimepopup' ,data.ETB_ATBTime, id);
                                       changePortDate('ETB_ATBTime', data.ETB_ATBTime);updateCalc(data, ports)"
                                    k-parse-formats="formatsDateTime" k-format="formatDateTime"
                                    ng-disabled="data == 0" />
                                <span unselectable="on" class="k-select">
                                    <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="data.ETB_ATBTime=clearDate();port.ETB_ATBTime=clearDate();
                                       reset('ETB_ATBTimepopup' ,data.ETB_ATBTime, id);changePortDate('ETB_ATBTime', data.ETB_ATBTime);updateCalc(data, ports)">select</span>
                                </span>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-4">
                        <select class="form-control" ng-model="port.ETDMarker"
                            ng-change="changeMarker('ETDMarker', port.ETDMarker); data.ETDMarker=port.ETDMarker;
                     updateCalc(data, ports)"
                            ng-disabled="data == 0">
                            <option>ETD</option>
                            <option>HD</option>
                        </select>
                    </div>
                    <div class="col-xs-8">
                        <span class="k-widget k-datetimepicker k-header k-input">
                            <span class="k-picker-wrap k-state-default">
                                <input kendo-date-time-picker type="text" k-ng-model="data.ETD_ATDTime" class="k-input" ng-model="port.ETD_ATDTime" id="popup" name="{{'ETD_ATDTimepopup'}}"
                                    ng-blur="data.ETD_ATDTime=checkOldMatch(port.ETD_ATDTime, data.ETD_ATDTime); reset('ETD_ATDTimepopup', data.ETD_ATDTime, id);
                                       changePortDate('ETD_ATDTime', data.ETD_ATDTime);updateCalc(data, ports)"
                                    k-parse-formats="formatsDateTime" k-format="formatDateTime"
                                    ng-disabled="data == 0" />
                                <span unselectable="on" class="k-select">
                                    <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="data.ETD_ATDTime=clearDate();port.ETD_ATDTime=clearDate();
                                    reset('ETD_ATDTimepopup', data.ETD_ATDTime, id); changePortDate('ETD_ATDTime', data.ETD_ATDTime);updateCalc(data, ports)">select</span>
                                </span>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-4">
                        <select class="form-control" ng-model="port.ETCMarker"
                            ng-change="changeMarker('ETCMarker', port.ETCMarker); data.ETCMarker=port.ETCMarker;
                     updateCalc(data, ports)" tabindex="-1"
                            ng-disabled="data == 0">
                            <option>ETC</option>
                            <option>SLD</option>
                        </select>
                    </div>
                    <div class="col-xs-8">
                        <span class="k-widget k-datetimepicker k-header k-input">
                            <span class="k-picker-wrap k-state-default">
                                <input kendo-date-time-picker type="text" k-ng-model="data.SldDate" class="k-input" ng-model="port.SldDate" id="popup" name="{{'SldDatepopup'}}"
                                    ng-blur="data.SldDate=checkOldMatch(port.SldDate, data.SldDate); 
                                       reset('SldDatepopup', data.SldDate, id);
                                       changePortDate('SldDate', data.SldDate);updateCalc(data, ports)" tabindex="-1"
                                    k-parse-formats="formatsDateTime" k-format="formatDateTime"
                                    ng-disabled="data == 0" />
                                <span unselectable="on" class="k-select">
                                    <span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="data.SldDate=clearDate();port.SldDate=clearDate();
                                    reset('SldDatepopup', data.SldDate, id); changePortDate('SldDate', data.SldDate);updateCalc(data, ports)">select</span>
                                </span>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
